<!--
 * @Description:档案信息详情
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-20 16:03:31
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-07 16:44:18
-->
<template>
    <div class="FileInfoDetails">
        <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="FileInfoDetails_return cursor">
                    <!-- <i class="el-icon-arrow-left" />返回查看更多结果 -->
                    <zBack :name="'返回查看更多结果'" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="16" :lg="16" :xl="18" class="FileInfoDetails_left">
                <div style="position: relative">
                    <span class="star" @click.stop="setStar(FilelnfoDeatilsData)">
                        <i class="el-icon-star-on" v-if="FilelnfoDeatilsData.select" style="color: #d5301b"></i>
                        <i class="el-icon-star-off" v-else></i>
                    </span>
                </div>
                <div class="data_title">
                    <div>
                        <h2>{{ FilelnfoDeatilsData.title }}</h2>
                    </div>
                    <div>
                        馆藏机构：<span>{{ FilelnfoDeatilsData.keepInstitution }}</span>
                    </div>
                </div>
                <el-descriptions class="elDescriptions" title="" direction="horizontal" :colon="true" :column="3" border>
                    <!-- <el-descriptions-item label-class-name="my-label" label="资料名称:" span="3">kooriookami</el-descriptions-item> -->
                    <el-descriptions-item label-class-name="my-label" label="档案号:">
                        {{ FilelnfoDeatilsData.sn }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="形成单位:" :span="2">
                        {{ FilelnfoDeatilsData.formInstitution }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="行政区:">
                        {{ FilelnfoDeatilsData.district }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="形成时间:">
                        {{ FilelnfoDeatilsData.formDate }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="文件数:">
                        {{ FilelnfoDeatilsData.fileNumber }}
                    </el-descriptions-item>

                    <el-descriptions-item label-class-name="my-label" label="资料类别:">
                        {{ FilelnfoDeatilsData.category }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="矿种:">
                        <div style="word-break: break-word">{{ FilelnfoDeatilsData.mineral }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="语种:">
                        {{ FilelnfoDeatilsData.language }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="工作程度:">
                        {{ FilelnfoDeatilsData.workDegree }}
                    </el-descriptions-item>

                    <el-descriptions-item label-class-name="my-label" label="编著者:" span="3">
                        {{ FilelnfoDeatilsData.author }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label" label="内容摘要:" span="3">
                        {{ FilelnfoDeatilsData.abstract }}
                    </el-descriptions-item>
                </el-descriptions>

                <div class="FileInfoDetails_data">
                    <el-tabs v-model="activeName" type="card" :stretch="true" @tab-click="handleClick">
                        <el-tab-pane label="成果资料" name="achievement">
                            <zCollapse :zCollapseData="achievementData" :tabsPane="'achievement'" />
                        </el-tab-pane>
                        <el-tab-pane label="原始资料" name="original">
                            <zCollapse :zCollapseData="originalData" :tabsPane="'original'" />
                        </el-tab-pane>
                        <el-tab-pane label="实物资料" name="physical" class="physical">
                            <p>实物数量</p>
                            <div>
                                <el-descriptions style="padding: 10px" border>
                                    <el-descriptions-item label="岩矿心">{{ physicalData.rockCore }}</el-descriptions-item>
                                    <el-descriptions-item label="总进尺">{{ physicalData.totalFootage }} </el-descriptions-item>
                                    <el-descriptions-item label="样品">{{ physicalData.sample }}</el-descriptions-item>
                                    <el-descriptions-item label="岩屑">{{ physicalData.debris }}</el-descriptions-item>
                                    <el-descriptions-item label="薄片">{{ physicalData.slice }}</el-descriptions-item>
                                    <el-descriptions-item label="标本">{{ physicalData.specimen }}</el-descriptions-item>
                                    <el-descriptions-item label="取心">{{ physicalData.coring }}</el-descriptions-item>
                                    <el-descriptions-item label="光片">{{ physicalData.lightSheet }} </el-descriptions-item>
                                    <el-descriptions-item label="其他">{{ physicalData.other }}</el-descriptions-item>
                                    <el-descriptions-item label="备注">{{ physicalData.remark }}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                            <p>地质简况</p>
                            <el-descriptions style="padding: 10px" border>
                                <el-descriptions-item label="主要矿种">
                                    <span v-if="physicalData.mainMinerals">
                                        {{ physicalData.mainMinerals }}
                                    </span>
                                </el-descriptions-item>
                                <el-descriptions-item label="成矿时代">
                                    <span v-if="physicalData.metallogenicAge">
                                        {{ physicalData.metallogenicAge }}
                                    </span>
                                </el-descriptions-item>
                                <el-descriptions-item label="成因类型">
                                    {{ physicalData.geneticType }}
                                </el-descriptions-item>
                                <el-descriptions-item label="大地构造位置">
                                    {{ physicalData.location }}
                                </el-descriptions-item>
                                <el-descriptions-item label="成矿带">
                                    {{ physicalData.metallogenicBlt }}
                                </el-descriptions-item>
                            </el-descriptions>
                            <p>主要成果</p>
                            <el-descriptions style="padding: 10px" border>
                                <el-descriptions-item label="简述">
                                    {{ physicalData.resume }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                    </el-tabs>

                    <div class="addbutton">
                        <el-button type="primary" plain @click="onSubmit()">加入借阅车</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8" :xl="6">
                <div class="FileInfoDetails_right" style="margin-top: 18px">
                    <zMap :MapParameter="MapParameter" />
                    <el-button size="mini" @click="openSpatialRetrieval()">查看大图</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import zMap from "@/components/zMap"
import zBack from "@/components/zBack"
import zCollapse from "@/components/zCollapse"
import ztree from "@/components/zCollapse/tree.vue"
import defaultSettings from "@/settings"
import { Style, Icon } from "ol/style"
import imgblue from "@/assets/zuobiao_blue.png"
import imgred from "@/assets/zuobiao_red.png"
export default {
    name: "FileInfoDetails",
    components: {
        zMap,
        zBack,
        zCollapse,
        ztree,
    },
    props: {},
    data() {
        return {
            achievementData: [],
            achievementType: [],
            originalData: [],
            physicalData: {},
            activeName: "achievement",
            MapParameter: {
                center: [116.394926, 39.9125],
                zoom: 6,
                mapPoint: [],
            },
            defaultSettings: defaultSettings,
            FilelnfoDeatilsData: [],
            PreviousRouter: "", //判断是否是从登录页过来的
        }
    },
    mounted() {
        this.PreviousRouter = sessionStorage.getItem("PreviousRouter")
        sessionStorage.removeItem("PreviousRouter")
    },
    watch: {
        "$store.state.table.rowData": {
            handler: async function (val, oldVal) {
                let obj = {
                    pageIndex: 1,
                    pageSize: 10,
                    sn: this.$store.getters["table/GET_ROWDATA"].sn,
                }
                const data = await this.$store.dispatch("ArchiveInfo/getArchive", obj)
                this.FilelnfoDeatilsData = data.data[0]
                this.getMapList()
                this.GetSnToFile()
                this.GetSnToFilePrimary()
                this.getPhysicalData()
                this.addSearchRecord()
                // this.FilelnfoDeatilsData.sn && this.getFileNumber()
            },
            immediate: true,
            deep: true,
        },
    },

    
    // beforeRouteLeave(to,from,next){
    //     to.meta.keepAlive = true
    //         next(0)
    //     },





    methods: {
        async onSubmit() {
            if (!this.$store.state.user.token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warnimg",
                })
                    .then((status) => {
                        if (status == "confirm") {
                            let obj = {
                                sn: this.FilelnfoDeatilsData.sn,
                                achievementData: this.achievementData,
                                originalData: this.originalData,
                            }
                            sessionStorage.setItem("FileInfoData", JSON.stringify(obj))
                            sessionStorage.setItem("PreviousRouter", "/FileInfoDetails")

                            this.$router.push("/login")
                        }
                    })
                    .catch((status) => {
                        if (status == "cancel") {
                        }
                    })

                // this.$alert("请先登录", "", {
                //     confirmButtonText: "确定",
                //     // cancelButtonText: '取消',
                //     callback: (action, instance, done) => {
                //         this.$router.push("/login")
                //     },

                // })
                return
            }
            let edata = []
            //扁平化
            //成果资料
            const achievementData = this.zpublic.DeepCopyArr(this.achievementData)
            achievementData.map((e) => {
                if (e.indeterminate || e.selected) {
                    e.data.map((s) => {
                        let sdata = {}
                        if (s.selected === true) {
                            sdata.snId = this.FilelnfoDeatilsData.id
                            sdata.title = this.FilelnfoDeatilsData.title
                            sdata.fileId = s.id
                            sdata.fileNo = s.fileNo

                            sdata.fileName = s.name
                            sdata.fileCategory = e.name
                            edata.push(sdata)
                        }
                    })
                }
            })
            //原始资料
            const originalData = this.zpublic.DeepCopyArr(this.originalData)
            originalData.map((e) => {
                if (e.indeterminate || e.selected) {
                    e.data.map((s) => {
                        let sdata = {}
                        if (s.selected === true) {
                            sdata.snId = this.FilelnfoDeatilsData.id
                            sdata.title = this.FilelnfoDeatilsData.title
                            sdata.fileId = s.id
                            sdata.fileNo = s.fileNo
                            sdata.fileName = s.name
                            sdata.fileCategory = e.name
                            edata.push(sdata)
                        }
                    })
                }
            })

            if (edata.length == 0) return this.$message.error("请选择文件")

            const { code, msg } = await this.$store.dispatch("borrowCar/addBorrowingCar", edata)
            if (code == 200) this.$message.success(msg || "添加成功")
        },
        handleClick(val, event) {
            // if (val.label == "成果资料") {
            //     this.GetSnToFile()
            // } else if (val.label == "原始资料") {
            //     this.GetSnToFilePrimary()
            // } else {
            // }
        },
        setSeceltMap() {
            const data = this.$route.query.data ? this.$route.query.data : ""
            if (data) {
                const Feature = this.$store.state.map.SourceVec.getFeatures()[data.Id - 1]
                Feature.setStyle(() => {
                    return new Style({
                        image: new Icon({
                            src: imgblue,
                            opacity: 1,
                            scale: "1", // 图片缩放比例 恢复
                        }),
                    })
                })
                Feature.changed()
            }
        },
        recoverSeceltMap() {
            const data = this.$route.query.data ? this.$route.query.data : ""
            if (data) {
                const Feature = this.$store.state.map.SourceVec.getFeatures()[data.Id - 1]
                Feature.setStyle(() => {
                    return new Style({
                        image: new Icon({
                            src: imgred,
                            opacity: 1,
                            scale: "1", // 图片缩放比例 恢复
                        }),
                    })
                })
                Feature.changed()
            }
        },
        //成果资料+
        async GetSnToFile() {
            const { data } = await this.$store.dispatch("ArchiveInfo/getSnToFile", { Sn: this.FilelnfoDeatilsData.sn })
            this.achievementData = data.achievementData
            this.FilelnfoDeatilsData.fileNumber || this.getFileNumber()
            this.getFileInfoData("achievementData")
        },
        //原始资料
        async GetSnToFilePrimary() {
            const { data } = await this.$store.dispatch("ArchiveInfo/GetSnToFilePrimary", { Sn: this.FilelnfoDeatilsData.sn })
            this.originalData = data.primaryData
            this.getFileInfoData("originalData")
        },
        // 实物资料
        async getPhysicalData() {
            const { data } = await this.$store.dispatch("ArchiveInfo/getPhysicalData", { Sn: this.FilelnfoDeatilsData.sn })
            this.physicalData = data || {}
        },
        async getFileNumber() {
            const { data } = await this.$store.dispatch("borrowForm/getFileNumber", { Sn: this.FilelnfoDeatilsData.sn })
            this.$set(this.FilelnfoDeatilsData, "fileNumber", data)
        },
        // 获取中心坐标
        getCentralData(oneLon, oneLat, twoLon, twoLat) {
            //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
            let aLon = 0,
                aLat = 0
            let bLon = Number(oneLon) - Number(twoLon)
            let bLat = Number(oneLat) - Number(twoLat)
            //Math.abs()绝对值
            if (bLon > 0) {
                aLon = Number(oneLon) - Math.abs(bLon) / 2
            } else {
                aLon = Number(twoLon) - Math.abs(bLon) / 2
            }
            if (bLat > 0) {
                aLat = Number(oneLat) - Math.abs(bLat) / 2
            } else {
                aLat = Number(twoLat) - Math.abs(bLat) / 2
            }
            return [aLon, aLat]
        },
        getMapList() {
            let e = this.FilelnfoDeatilsData
            this.FilelnfoDeatilsData.LonLat = this.getCentralData(e.maxX, e.maxY, e.minX, e.minY)
            this.$store.state.map.mapList = [{ ...this.FilelnfoDeatilsData }]
            this.$store.state.table.PaginationData.total = 1
        },
        // 添加浏览记录
        async addSearchRecord() {
            let params = {
                sn: this.FilelnfoDeatilsData.sn,
                title: this.FilelnfoDeatilsData.title,
                category: this.FilelnfoDeatilsData.category,
                district: this.FilelnfoDeatilsData.district,
            }
            const { data } = await this.$store.dispatch("searchRecord/addSearchRecord", params)
            // this.$set(this.FilelnfoDeatilsData, "fileNumber", data)
        },
        async setStar(val) {
            let parameter = {
                sn: val.sn,
                title: val.title,
                category: val.category,
                district: val.district,
            }

            const { code } = await this.$store.dispatch("collectRecord/addCollectRecord", parameter)
            if (code == 200) this.FilelnfoDeatilsData.select = !this.FilelnfoDeatilsData.select
        },
        //获取缓存数据
        getFileInfoData(val) {
            if (this.PreviousRouter == "/FileInfoDetails") {
                let data = JSON.parse(sessionStorage.getItem("FileInfoData"))
                if (data.achievementData) this.achievementData = data.achievementData
                if (data.originalData) this.originalData = data.originalData
            }
        },
        openSpatialRetrieval() {
            this.$store.state.map.pageType = "AttrilbuteQuery"
            this.$router.push({ path: "/SpatialRetrieval" })
        },
    },
    // beforeDestroy() {
    //     this.recoverSeceltMap()
    // },
}
</script>

<style scoped lang="scss">
$box: 0 2px 12px 0 rgb(0 0 0 / 10%);

.FileInfoDetails {
    display: flex;
    justify-content: space-between;
    padding: $main_padding;
    margin-bottom: 100px;

    // background: white;
    .elDescriptions {
        font-size: 0.259rem;
        font-family: "微软雅黑";
        color: #333;

        ::v-deep .my-label {
            text-align: right;
            font-weight: bold;
            background: #f7f7f7;
            width: 12%;
        }

        ::v-deep .el-descriptions-item__cell {
            border: 1px solid #ccc;
            min-width: 70px;
        }
    }

    .el-row {
        width: 100%;
        background: white;
    }

    .FileInfoDetails_return {
        padding: 10px 0;
        margin: 10px 0;
        font-size: 24px;

        // color: rgb(104, 182, 242);
        &:hover {
            color: $hover;
        }
    }

    .FileInfoDetails_left {
        padding: 30px 0;
        background: white;

        .data_title {
            text-align: center;
            background-color: #ecf0f9;
            border-bottom: 4px solid #1b50a0;
            padding: 20px;
            margin: 0 auto;
        }
    }

    .FileInfoDetails_right {
        position: relative;
        height: 500px;
        padding: 0 20px;

        .el-button {
            position: absolute;
            top: 0;
            right: 20px;
        }
    }

    .FileInfoDetails_data {
        min-height: 600px;
        margin: 20px 0;
        border: 1px solid #ccc;
        // box-shadow: $box;
        // border-radius: 10px;
        overflow: hidden;

        .el-tabs {
            min-height: 7rem;

            ::v-deep .el-tabs__header {
                .el-tabs__item {
                    font-size: 0.259rem;
                    height: 100%;
                    padding: 10px;
                }

                .el-tabs__nav {
                    height: 0.8rem;
                }

                .is-active {
                    // background: #fff !important;
                    border-bottom: 2px solid #1b50a0;
                }
            }
        }

        .addbutton {
            text-align: center;
            padding-bottom: 10px;
        }
    }

    ::v-deep .el-descriptions-row {
        height: 60px !important;
    }
}

.physical {
    ::v-deep .el-descriptions-item__cell {
        width: 100px;
    }

    p {
        text-align: center;
        font-size: 22px;
    }
}

.star {
    text-align: right;
    font-size: 27px;
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>
